<template>
	<view  class="container adduser">
		<myhead :title="mytitle"></myhead>
		<view class="main">
			<view class="info">
				<view class="item name">
					<view class="iteminfo">
						<text>货品名称</text>
						<text style="color: #DD524D;">(必填)</text>
					</view>
					<view class="myinput">
						<input 
						:focus="true"
						class="inputbox" placeholder="请输入商品名称"/>
					</view>
				</view>
				<view class="item tel">
					<view class="iteminfo">
						<text>单价</text>
						<text style="color: #DD524D;">(必填)</text>
					</view>
					<view class="myinput">
						<input class="inputbox" placeholder="请输入单价" />
						<text style="color: #DD524D; margin-left: 20rpx; font-size: 30rpx; font-weight: bold;">元/斤</text>
					</view>
				</view>
			</view>
			<view class="btn">
				保存商品
			</view>
		</view>
	</view>
</template>

<script>
	import myhead from "../../components/header/header.vue"
	export default {
		data() {
			return {
				mytitle:'添加新商品'
			};
		},
		components:{
			myhead
		}
	}
</script>

<style lang="scss">
.adduser{
	color: black;
	display: flex;
	flex-direction: column;
	.main{
		width: 100%;
		box-sizing: border-box;
		flex: 1;
		background-color: #EEEEEE;
		padding: 10rpx;
		.info{
			margin-bottom: 30rpx;
			background-color: #FFFFFF;
			padding: 12rpx;
			.item{
				.iteminfo{
					padding: 10rpx;
					font-size: 30rpx;
				}
				.myinput{
					padding: 10rpx;
					display: flex;
					align-items: center;
					.inputbox{
						flex: 1;
						background-color: #E8E8E8;
						padding: 15rpx 20rpx;
						border-radius: 18rpx;
						font-size: 30rpx;
						border: 2rpx solid #E8E8E8;
						&:focus{
							border-color: #34C758;
						}
					}
				}
			}
		}
		.btn{
			width: 50%;
			margin: 0 auto;
			background-color: #353766;
			text-align: center;
			line-height: 70rpx;
			font-size: 30rpx;
			white-space: nowrap;
			color: #FFFFFF;
			border-radius: 28rpx;
		}
	}
}
</style>
